<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>专家预约</span>
      </div>
    </template>

    <el-form :model="form" inline label-width="80">
      <el-row>
        <el-col :span="21">
          <el-form-item label="">
            <el-select
              v-model="pageData.source"
              clearable
              placeholder="全部来源"
              style="width: 100px"
              @change="selectDateChange"
            >
              <el-option
                v-for="item in comeList"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              />
            </el-select>
            <div style="margin: 0 5px"></div>
            <el-select
              v-model="pageData.status"
              clearable
              placeholder="全部状态"
              style="width: 100px"
              @change="selectDateChange"
            >
              <el-option
                v-for="item in allstatus"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预约时间:">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="selectchange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" style="">
          <el-button
            type="primary"
            style="width: 150px"
            @click="downChange"
            v-hasPermi="['leader:appointment:export']"
            >导出Execl</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      stripe
    >
      <el-table-column prop="studentName" label="学生姓名" align="center" />
      <el-table-column prop="studentMobile" label="电话" align="center" />
      <el-table-column prop="expertName" label="预约专家" align="center" />
      <el-table-column prop="source" label="来源" align="center" />
      <el-table-column prop="creationTime" label="预约时间" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <div>{{ scope.row.status === 0 ? '未处理' : '已处理' }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="top"
          >
            <el-icon
              size="22"
              color="#2f70f8"
              @click="updateChange(scope.$index)"
              style="cursor: pointer"
            >
              <EditPen />
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="right" style="margin-top: 20px">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="pagination"
          @current-change="pagination"
        />
      </el-config-provider>
    </div>
  </el-card>
  <!-- 备注-->
  <remakeDialog ref="remakeRef" @refrehsList="pagination"></remakeDialog>
  <!--  下载专家预约列表-->
  <downListInfo ref="downList"></downListInfo>
</template>
<script setup>
import { reactive, ref } from 'vue';
import remakeDialog from './module/remakeDialog.vue';
import downListInfo from './module/downListInfo.vue';
import {
  reserveList,
  reserveListFilter,
  reserveExport,
} from '@/api/leader/Filling.js';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';

const value1 = ref('');
const remakeRef = ref(null);
const downList = ref(null);
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});

const tableData = ref([]);
//请求分页参数
const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
const comeList = ref([]);
const allstatus = ref([]);

function selectDateChange() {
  pagination(); // 刷新加载列表数据
}

function selectchange(val) {
  if (val) {
    pageData.createStartTime = val[0];
    pageData.createEndTime = val[1];
  } else {
    pageData.createStartTime = '';
    pageData.createEndTime = '';
  }
  pagination();
}

function pagination() {
  // 专家预约列表
  Object.keys(pageData).forEach(function (key) {
    if (pageData[key] === '') {
      delete pageData[key];
    }
  });

  reserveList(pageData).then((res) => {
    tableData.value = res.data.data; // 列表数据
    pageData.total = res.data.total; // 总数
  });
}
pagination(); // 初始化加载数据

function searchdata() {
  reserveListFilter().then((res) => {
    if (res.code === 20000) {
      comeList.value = res.data[0].data;
      allstatus.value = res.data[1].data;
    }
  });
}
searchdata();

function downChange() {
  // downList.value.openDownChange();
  reserveExport(pageData).then((res) => {
    window.location.href = res.data.url;
    ElMessage.success('导出成功');
  });
}

/**
 * 备注
 * @param {Number} index 下标
 */
function updateChange(index) {
  remakeRef.value.openChange(tableData.value[index]);
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
